<template>
  <div class="h-87" style="top: 13.3%;">
    <!-- 高 636px  -->
    <div class="flex justify-between" style="height: 48.29%">
      <div data-bottom class="second-sides">
        <page-header :ph="270" text="技术培训通知公告">
          <div class="styleTable">
            <div class="operate-table-header">
              <div class="table-header-item">序号</div>
              <div class="table-header-item">培训内容</div>
              <div class="table-header-item">培训时间</div>
              <div class="table-header-item">状态</div>
            </div>
            <vue-seamless-scroll :data="listData" class="winners-list-cont" v-if='listData.length > 7'>
              <div v-for="(item, index) in listData" :key="index" class="operate-table-content">
                <div class="table-body-item">
                  <p>{{ index + 1 }}</p>
                </div>
                <div class="table-body-item">
                  <p>{{ item.subject }}</p>
                </div>
                <div class="table-body-item">
                  <p>{{ item.startTime + ' - ' + item.endTime }}</p>
                </div>
                <div class="table-body-item"><i :class="[item.trainStatus == '进行中' ? 'i3' :item.trainStatus == '未开始' ? 'i1' : 'i2' ]" />{{ item.trainStatus }}</div>
              </div>
            </vue-seamless-scroll>
            <div class="winners-list-cont" style="border: 1px solid #155277;" v-else>
              <div v-for="(item, index) in listData" :key="index" class="operate-table-content" style="border: none; border-bottom: 1px solid #155277;">
                <div class="table-body-item">
                  <p>{{ index + 1 }}</p>
                </div>
                <div class="table-body-item">
                  <p>{{ item.subject }}</p>
                </div>
                <div class="table-body-item">
                  <p>{{ item.startTime + ' - ' + item.endTime }}</p>
                </div>
                <div class="table-body-item"><i :class="[item.trainStatus == '进行中' ? 'i3' :item.trainStatus == '未开始' ? 'i1' : 'i2' ]" />{{ item.trainStatus }}</div>
              </div>
            </div>
          </div>
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header :ph="270" text="基层科技人才">
          <div style="height: 100%; margin-top: 15px">
            <v-chart v-if="optionZZFBXX.isShow" :options="optionZZFBXX" />
          </div>
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="专家分类" :ph="300">
          <div style="height: 100%; margin-top: 15px">
            <v-chart ref="nyzj" :is-show="tortadiagram.isShow" :options="tortadiagram" />
          </div>
        </page-header>
      </div>
    </div>
    <!-- 高 20px -->
    <div style="height: 1.5%" />
    <!-- 高 607px -->
    <div class="flex justify-between" style="height: 48.29%">
      <div data-bottom class="second-sides">
        <page-header :ph="270" text="技术培训">
          <!-- <div style="height: 90%; margin-top: 30px">
            <v-chart v-if="optionZscpzlzr.isShow" ref="zscpjzlzr" :options="optionZscpzlzr" />
          </div> -->
          <v-chart v-if="optionZscpzlzr.isShow" ref="zscpjzlzr" :options="optionZscpzlzr" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header :ph="330" text="技术资料">
          <!-- <div style="height: 90%; margin-top: 30px">
            <v-chart :options="optionJRLLZB" />
          </div> -->
          <v-chart :options="optionJRLLZB" />
        </page-header>
      </div>
      <div data-bottom class="second-sides">
        <page-header text="产业标准">
          <div style="height: 90%; margin-top: 36px">
            <v-chart v-if="category.isShow" :options="category" />
          </div>
        </page-header>
      </div>
    </div>
    <Particulars />
  </div>
</template>

<script>
import { getTowSideStat, hotWords,informationExpert,technicalData, getSingleValue,getEchartsData,productStandard,getEchartsDataS,classificationExpert, trainingAnnouncement} from '@/api/connector'
import { getDataAndRefresh } from '@/utils/echartsRefresh'
import Particulars from 'header/particulars.vue'
import echarts from 'echarts'
import { getHandle } from '@/api'
import { formatNumber } from '@/utils/app'
import PageHeader from 'header/PageHeader.vue'
import 'echarts-wordcloud'
import vueSeamlessScroll from 'vue-seamless-scroll'
import YlTable from 'header/yltable'
const tooltip = function(a, b) {
  return {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
    formatter: function(params, ticket, callback) {
      var htmlStr = ''
      for (var i = 0; i < params.length; i++) {
        var param = params[i]
        var xName = param.name // x轴的名称
        var seriesName = param.seriesName // 图例名称
        var value = param.value // y轴值
        var color = param.color // 图例颜色
        if (i === 0) {
          htmlStr += xName + '<br/>' // x轴的名称
        }
        htmlStr += '<div>'
        htmlStr +=
          '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
        htmlStr += seriesName + '：' + formatNumber(value) + (i === 0 ? a : b) // 圆点后面显示的文本
        htmlStr += '</div>'
      }
      return htmlStr
    }
  }
}
export default {
  name: 'AgriculturalTechnology',
  components: { PageHeader, Particulars, vueSeamlessScroll },
  data() {
    return {
      listData: [
        // {
        //   title: '设施农业发展态势与温室新建造新技术（设施瓜菜专场）',
        //   date: '2021.10.12 09:00:00 ～ 2021.10.15 18:00:00',
        //   area: '农创成果汇一楼大厅南区A1-A6区',
        //   stata: '1'
        // },
        // {
        //   title: '设施农业发展态势与温室新建造新技术（设施瓜菜专场）',
        //   date: '2021.10.12 09:00:00 ～ 2021.10.15 18:00:00',
        //   area: '农创成果汇一楼大厅南区A1-A6区',
        //   stata: '0'
        // },
        // {
        //   title: '设施农业发展态势与温室新建造新技术（设施瓜菜专场）',
        //   date: '2021.10.12 09:00:00 ～ 2021.10.15 18:00:00',
        //   area: '农创成果汇一楼大厅南区A1-A6区',
        //   stata: '0'
        // }
      ],
      states: ['已结束', '进行中', '未开始'],
      category: {
        isShow: false,
        tooltip: {
          formatter: '{b}<br />{c0}个'
          // trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        yAxis: [
          {
            name: '个',
            type: 'value',
            nameTextStyle: {
              color: '#E9F7FF'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#5C6D7C'],
                width: 1,
                type: 'solid'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5C6D7C',
                width: 1
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            }
          }
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          top: '13%',
          containLabel: true
        },
        series: [
          {
            data: [],
            type: 'bar'
          }
        ]
      },
      optionJRLLZB: {
        title: {},
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            var result = params[0].name + '<br>'
            params.forEach(function(item) {
              result += item.marker + item.seriesName + ' : ' + item.value + ' 个</br>'
            })
            return result
          }
        },

        legend: {
          itemGap: 20,
          right: 15,
          top: -4,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#E9F7FF',
            fontWeight: 400,
            fontSize: 14
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 坐标轴两边留白
          data: [],
          axisLabel: {
            margin: 13,
            lineHeight: 0,
            padding: [0, 0, 10, 0],
            // 坐标轴刻度标签的相关设置。
            interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
              color: '#ffffff',
              // fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            },
            formatter: function(params) {
              var newParamsName = ''
              var paramsNameNumber = params.length
              var provideNumber = 4 // 一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
            // rotate:50,
          },
          axisTick: {
            // 坐标轴刻度相关设置。
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: '#ffffff'
              // 	opacity:0.1
            }
          }
        },
        yAxis: [
          {
            name: '个',
            type: 'value',
            splitNumber: 5,
            nameTextStyle: {
              color: '#E9F7FF'
            },
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5C6D7C',
                width: 1
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#5C6D7C',
                opacity: 0.5
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            }
          }
        ],
        series: []
      },
      tortadiagram: {
        isShow: false,
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b}: {c}位 ({d}%)'
          formatter: function(params) {
            var result = ''
            return (result = params.marker + params.name + ' : ' + formatNumber(params.value) + '位  ' + params.percent + ' %</br>')
          }
        },
        legend: {
          orient: 'vertical',
          right: 30,
          top: '22%',
          itemGap: 22,
          data: [],
          itemWidth: 10,
            itemHeight: 10,
            textStyle: {
              color: '#E9F7FF',
              fontWeight: 400,
              fontSize: 14
            },
        },
        title: [
          {
            left: 'center',
            text: '',
            textStyle: {
              fontSize: 20,
              fontWeight: 'normal',
              fontFamily: 'myfont',
              color: '#fff'
            },
            left: '35%',
            top: '44%'
          },
          {
            left: 'center',
            text: '专家人数',
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
              fontFamily: 'myfont',
              color: '#3CB5FF'
            },
            left: '34%',
            top: '50%'
          }
        ],
        series: [
          {
            name: '农业专家',
            center: ['40%', '50%'],
            type: 'pie',
            radius: ['52%', '63%'],
            avoidLabelOverlap: false,
            itemStyle: {
            normal: {
            color: function(params) {
                    //自定义颜色
                    var colorList = [
                    '#18D8B1', '#2471D2', '#3CB5FF', '#6647FF', '#E9D017', '#F68E48', '#11A0BB'
                    ];
                    return colorList[params.dataIndex]
                }
            }
        },
            labelLine: {
              length2: 70
            },
            label: {
              alignTo: 'labelLine',
              padding: [0, -65],
              formatter: (params) => {
                return params.percent + '%' + '  \n\n'
              },
              color: '#fff',
              fontWeight: 600,
              fontSize: 15
            },
            // show: true,
            // position: 'bottom',
            // offset: [0, 50],
            // formatter: function (params) {
            //   // if (params.name !== '') {
            //   //   // return params.name + '\n' + '(' + params.percent + '%)';
            //   //   return params.value + ' 万元'
            //   // } else {
            //   //   return ''
            //   // }

            //   return params.percent + '%'
            // }
            //   normal:{
            //     show: true,
            //     position: 'center',
            //     formatter: [
            //         `{a|${'2300人'}}`,
            //         `{b|${'专家'}}`
            //     ].join('\n'),
            //     rich: {
            //         a: {
            //             color:'#fff',
            //             fontSize: 18,
            //             lineHeight: 30
            //         },
            //         b: {
            //             color:'blue',
            //             fontSize: 20,
            //         }
            // }},

            // labelLine: {
            //   show: true
            // },
            data: [
              
            ]
          }
        ]
      },
      hotWordsList: {
        isShow: false,
        tooltip: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 30
          }
        },
        series: [
          {
            type: 'wordCloud',
            // 网格大小，各项之间间距
            gridSize: 30,
            // 形状 circle 圆，cardioid  心， diamond 菱形，
            // triangle-forward 、triangle 三角，star五角星
            shape: 'line',
            // 字体大小范围
            sizeRange: [14, 60],
            // 文字旋转角度范围
            rotationRange: [0, 0],
            // 旋转步值
            rotationStep: 0,
            // 自定义图形
            // maskImage: maskImage,
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            // 画布宽
            width: '90%',
            // 画布高
            height: '100%',
            // 是否渲染超出画布的文字
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                    [Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55)].join(',') +
                    ')'
                  )
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#2ac'
              }
            },
            data: []
          }
        ]
      },
      optionZZFBXX: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br>{a}:{c}人'
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '6%',
          top: '12%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          boundaryGap: false,
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '人',
            nameTextStyle: {
              color: '#E9F7FF'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#5C6D7C'],
                width: 1,
                type: 'solid'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5C6D7C',
                width: 1
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            itemStyle: {
              color: 'RGBA(87, 65, 199, 1)',
              width: 0.5
            },
            areaStyle: {
              normal: {
                // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                // 折线颜色
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(156, 82, 255, 0)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(156, 82, 255, 1)'
                  }
                ])
              }
            },
            data: []
          }
        ]
        // isShow: false,
        // title: {
        //   //   text: '农产品劳动力需求分析'
        // },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   },
        //   // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
        //   formatter: function(params, ticket, callback) {
        //     var htmlStr = ''
        //     for (var i = 0; i < params.length; i++) {
        //       var param = params[i]
        //       var xName = param.name // x轴的名称
        //       var seriesName = param.seriesName // 图例名称
        //       var value = param.value // y轴值
        //       var color = param.color // 图例颜色
        //       if (i === 0) {
        //         htmlStr += xName + '<br/>' // x轴的名称
        //       }
        //       htmlStr += '<div>'
        //       htmlStr +=
        //         '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
        //       htmlStr += seriesName + '：' + formatNumber(value) + '个' // 圆点后面显示的文本
        //       htmlStr += '</div>'
        //     }
        //     return htmlStr
        //   }
        // },
        // legend: {},
        // grid: {
        //   left: '3%',
        //   right: '4%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        // toolbox: {},
        // xAxis: {
        //   type: 'category',
        //   boundaryGap: false, // 坐标轴两边留白
        //   data: [],
        //   axisTick: {
        //     // 坐标轴刻度相关设置。
        //     show: false
        //   },
        //   splitLine: {
        //     // 坐标轴在 grid 区域中的分隔线。
        //     show: false,
        //     lineStyle: {
        //       color: '#E5E9ED'
        //       // 	opacity:0.1
        //     }
        //   }
        // },
        // yAxis: [
        //   {
        //     type: 'value',
        //     name: '个',
        //     splitNumber: 5
        //   }
        // ],
        // series: [
        //   {
        //     name: '',
        //     type: 'line',
        //     smooth: true,
        //     itemStyle: {
        //       normal: {
        //         color: '#3A84FF',
        //         lineStyle: {
        //           color: '#3A84FF',
        //           width: 1
        //         },
        //         areaStyle: {
        //           color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        //             {
        //               offset: 0,
        //               color: 'rgba(58,132,255,0)'
        //             },
        //             {
        //               offset: 1,
        //               color: 'rgba(58,132,255,0.35)'
        //             }
        //           ])
        //         }
        //       }
        //     },
        //     data: []
        //   }
        // ]
      },
      optionJscgjzlzrje: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}<br>{a}:{c}亿元'
        },
        legend: {
          data: ['蒸发量', '降水量', '平均温度']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '亿元',
          nameTextStyle: {
            color: '#E9F7FF'
          },
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          }
        },
        series: []
      },
      optionZscpzlzr: {
        isShow: false,
        tooltip: tooltip('场次', '场次'),
        legend: {
          data: ['#3CB5FF', '#6647FF'],
          // orient: 'vertical',
          right: 15,
          top: -4,
          itemStyle: {
            color: '#3CB5FF'
          },
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: '#E9F7FF',
            fontWeight: 400,
            fontSize: 14
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisPointer: {
            type: 'shadow'
          },

          axisLine: {
            lineStyle: {
              color: '#5C6D7C',
              width: 1
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '场次',
            nameTextStyle: {
              color: '#E9F7FF'
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#5C6D7C'],
                width: 1,
                type: 'solid'
              }
            },
            nameTextStyle: {
              color: '#E9F7FF'
            },
            axisLine: {
              lineStyle: {
                color: '#5C6D7C',
                width: 1
              }
            }
          },
          {
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#5C6D7C'
              }
            }
          }
        ],
        series: [
        ]
      },
      table: {
        url: '/cybd/api/agri/agriTechPrize/queryList',
        columns: [
          {
            prop: 'firstAchieveUnit',
            label: '第一完成单位'
          },
          {
            prop: 'achieveMen',
            label: '完成人'
          }
        ]
      },
      table_2: {
        url: '/cybd/api/agri/policy/queryList',
        columns: [
          {
            prop: 'policyName',
            label: '政策名称'
          },
          {
            prop: 'publishUnit',
            label: '发布机构'
          },
          {
            prop: 'source',
            label: '来源'
          }
        ]
      },
      timer1: null,
      timer2: null,
      timer3: null,
      timer4: null,
      timer5: null,

    }
  },
  created() {
    informationExpert().then((res)=>{
      this.tortadiagram.title[0].text = res.data.count + '人'
    })
    this.timer1 = getDataAndRefresh(this.echartstechnicalData)
    this.timer2 = getDataAndRefresh(this.echartsclassificationExpert)
    this.timer3 = getDataAndRefresh(this.echartsproductStandard)
    this.timer4 = getDataAndRefresh(this.echartsgetEchartsData)
    this.timer5 = getDataAndRefresh(this.jsgetEchartsData)
    //技术培训通知公告
    trainingAnnouncement({page:1,perPage:20,orderBy:'startTime',orderDir:'desc'}).then((res)=>{
          if(res.status == 0){
            this.listData = res.data.rows
            // this.listData = [...res.data.rows, ...res.data.rows]
          }
          
    })
  },
  destroyed() {
      clearInterval(this.timer1)
      clearInterval(this.timer2)
      clearInterval(this.timer3)
      clearInterval(this.timer4)
      clearInterval(this.timer5)
    },
  methods: {
    toFour(name, isCodew, typeCode) {
      if (name === isCodew) {
        this.$router.push({ name: 'Fourstage', query: { code: '000204', name: this.$route.matched[0].name, typeCode: typeCode || isCodew }})
      }
    },
     //技术培训
    jsgetEchartsData(){
      this.optionZscpzlzr.xAxis.data = []
      if(this.optionZscpzlzr.series.length>0){
        this.optionZscpzlzr.series[0].data = []
        this.optionZscpzlzr.series[1].data = []
      }
      getEchartsData('DATA_TYPE_TECHNICAL_TRAINING').then((res)=>{
        const val = res.data.rows.reverse()
        this.optionZscpzlzr.xAxis.data = val.map((item)=> item.dataDateStr)
        this.optionZscpzlzr.legend.data = ['线上培训','线下培训']
        let xspx = val.map((item)=> item.c_1)
        let xxpx = val.map((item)=> item.c_2)
        this.optionZscpzlzr.series = []
        this.optionZscpzlzr.series.push({
              name: '线上培训',
              type: 'bar',
              data: xspx,
              barWidth: '15%',
              itemStyle:{
                  normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    { offset: 0, color: 'rgba(0, 182, 255, 0)' },
                    { offset: 1, color: '#00DCFF' }
                  ])
                }
              }
            })
        this.optionZscpzlzr.series.push({
              name: '线下培训',
              type: 'bar',
              data: xxpx,
              barWidth: '15%',
              itemStyle:{
                  normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    { offset: 0, color: 'rgba(156, 82, 255, 0)' },
                    { offset: 1, color: '#9C52FF' }
                  ])
                }
              }
            })
        this.optionZscpzlzr.isShow = true
        // const val = res.data.rows
        //     this.optionZZFBXX.xAxis.data = val.map((item)=> item.dataDateStr).reverse()
        //     this.optionZZFBXX.series[0].name = '基层科技人才'
        //     this.optionZZFBXX.series[0].data = val.map((item)=> item.c_1).reverse()
        //     this.optionZZFBXX.isShow = true
    })
    },
    echartsgetEchartsData(){
    //基层科技人才
    this.optionZZFBXX.series[0].data = []
    this.optionZZFBXX.xAxis.data = []
        getEchartsData('DATA_TYPE_TECHNOLOGICAL_TALENTS').then((res)=>{
            if(res.status == 0){
                const val = res.data.rows.reverse()
                this.optionZZFBXX.xAxis.data = val.map((item)=> item.dataDateStr)
                this.optionZZFBXX.series[0].name = '基层科技人才'
                this.optionZZFBXX.series[0].data = val.map((item)=> item.c_1)
                this.optionZZFBXX.isShow = true
            }
                
        })
    },
    //产业标准
    echartsproductStandard(){
      this.category.series[0].data = []
      this.category.xAxis.data = []
      productStandard({type:2}).then((res)=>{
              if(res.status == 0){
                const val = res.data.rows
                  this.category.xAxis.data = val.map(item=>item.name)
              this.category.series[0].data = val.map(item=>item.count)
              this.category.series[0].barWidth = '15%'
              this.category.series[0].type = 'bar'
              this.category.series[0]['itemStyle'] = {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    { offset: 0, color: 'rgba(24, 216, 177, 0)' },
                    // {offset: 0.4, color: '#174D54'},
                    // {offset: 0.6, color: '#189585'},
                    // {offset: 0.8, color: '#17C4A4'},
                    { offset: 1, color: '#18D8B1' }
                  ])
                }
              }
              this.category.isShow = true
              }
          })
    },
    // 专家分类
    echartsclassificationExpert(){
      this.tortadiagram.legend.data = []
      this.tortadiagram.series[0].data = []
      classificationExpert().then((res)=>{
      if(res.status == 0){
        const val = res.data.rows
        let valname = val.map(item => item.name)
        let valnum = val.map(item => item.count)
      this.tortadiagram.legend.data = valname
      
        // eslint-disable-next-line no-undef
        var i = 0
        var series = []
        for (i = 0; i < valname.length; i++) {
          var item = {
            name: valname[i],
            value: valnum[i]
          }
          series.push(item)
        }
        this.tortadiagram.series[0].data = series
        this.tortadiagram.isShow = true
        // this.toLink(this, 'nyzj', (params) => {
        //   this.$router.push({ name: 'Fourstage', query: { code: '000103', typeCode: '农业专家数', name: 'industrial-base' }})
        // })
      }
      
    })
    },
    //技术资料
    echartstechnicalData(){
      if(this.optionJRLLZB.series.length>0){
        this.optionJRLLZB.series[0].data = []
        this.optionJRLLZB.series[1].data = []
        this.optionJRLLZB.series[2].data = []
      }
      this.optionJRLLZB.xAxis.data = []
      technicalData({type:1,perPage:5}).then((res)=>{
      if(res.status == 0){
        const val = res.data
        let keyList = [];
        let valList = []
        for (var key in val) {
          keyList.push(key)
          valList.push(val[key])
      }
      this.optionJRLLZB.xAxis.data = keyList
      let pxzl = []
      let wxzl = []
      let jczl = []
      valList.map((item,index) => {
        // item.map(items => {
          pxzl.push(item[0].count);
          jczl.push(item[1].count);
          wxzl.push(item[2].count);
      })
      const seriesResult = []
      const data = {
        '文献资料':wxzl,
        '培训资料':pxzl,
        '培基础知识':jczl,
      }
      let typeSet = ['文献资料', '培训资料', '培基础知识']
      for (const i in typeSet) {
        seriesResult.push({
          name: typeSet[i],
          type: 'line',
          data: data[typeSet[i]],
          symbolSize: 8,
          // symbol: 'circle',     //折点设定为实心点
          // hoverAnimation: false,
          symbol: 'emptyCircle',
          itemStyle: {
            normal: {
              // color:'#fc8a0f', //折点颜色
              // 拐点上显示数值
              // lineStyle:{
              //       color:'#ff9c35' //折线颜色
              //           },
              // shadowColor:'blue',
              label: {
                show: false
              }
            }
          }
        })
      }
      this.optionJRLLZB.series = seriesResult
      }
    })
    }
  }
}
</script>

<style lang="scss" scoped>
.second-center {
  width: 47.87%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-sides {
  width: 32.7%;
  height: 100%;
  background-size: 100% 100% !important;
}
.second-center[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-center[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-top] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.second-sides[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
}
.el-table {
  background-color: transparent !important;
}
.styleTable {
  height: 78%;
  width: 100%;
  padding: 0 10px;
  margin-top: 38px;
  box-sizing: border-box;
  // border: 1px solid #155277;
  border-bottom: 0;
  .operate-table-header {
    width: 100%;
    display: flex;
    height: 40px;
    border: 1px solid #155277;
    // background: rgba(70, 180, 224, 0.15);
    opacity: 0.9;
    justify-content: space-around;
    align-items: center;
    .table-header-item {
      &:first-child {
        width: 40px;
      }
      width: 28%;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #eaf2ff;
      text-align: center;
      &:last-child {
        width: 80px;
      }
    }
  }
  .winners-list-cont {
    width: 100%;
    // height: 232px;
    height: 100%;
    overflow: hidden;
    border-bottom: 1px solid #155277;
    .operate-table-content {
      border: 1px solid #155277;
      border-bottom: none;
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      // background-color: yellow;
      .table-body-item {
        width: 28%;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #fff;
        opacity: 0.9;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 0;
        &:first-child {
          width: 40px;
        }
        &:last-child {
          width: 80px;
        }
        p {
          width: 100%;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        i {
          width: 8px;
          height: 8px;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          margin-right: 6px;
        }
        .i0 {
          background-image: url(../../../assets/img/flashing.gif);
        }
        .i1 {
          background-image: url(../../../assets/img/wks.png);
        }
        .i2 {
          background-image: url(../../../assets/img/yjs.png);
        }
        .i3 {
          background-image: url(../../../assets/img/flashing.gif);
        }
      }
    }
  }
}
</style>
